import React from 'react';
import './Home.scss'
import axios from 'axios'
import withRouter from '../../router/withRouter'


class Home extends React.Component {
    state = {
        limit: 20,
        homeList: [],
    }
    componentDidMount() {
        setInterval(() => {
            if ((document.documentElement.scrollHeight - document.documentElement.clientHeight) > document.documentElement.scrollTop + 200) {
                //未到底
                // console.log('未到底');
            } else {
                this.setState({
                    limit: this.state.limit + 20
                })
                axios.get(`/douyu/api/RoomApi/live?offset=0&limit=${this.state.limit}`)
                    .then((res) => {
                        this.setState({
                            homeList: [...this.state.homeList, ...res.data.data]
                        })
                    })
            }
        }, 2000)
    }
    render() {
        let { homeList } = this.state;
        let { navigate } = this.props;
        console.log(homeList);
        return (
            <div className='home'>
                {homeList.length !== 0 &&
                    <ul>
                        {homeList.map(item => {
                            return <li key={item.room_id} onClick={() => {
                                navigate(`/room?id=${item.room_id}`)
                            }}>
                                <img src={item.room_src} alt="" />
                                <p>{item.room_name}</p>
                            </li>
                        })}
                    </ul>
                }
            </div>
        )
    }
}
export default withRouter(Home)